import React, {useState,useMemo} from 'react';

function ChildComponent({name,children}){
    function changeAhong(name){
        console.log('她来了！阿红向我们走来了')
        return name + ',阿红向我们走来'
    }

    const actionAhong = useMemo(()=>changeAhong(name),[name])
    return (
        <>
            <div>{actionAhong}</div>
            <div>{children}</div>
        </>
    )
}

function Example8() {
    const [ahong,setAhong] = useState('阿红待客状态')
    const [yuanyuan,setYuanyuan] = useState('圆圆待客状态')
    return (
        <>
            <button onClick={()=>{setAhong(new Date().getTime())}}>阿红</button>
            <button onClick={()=>{setYuanyuan(new Date().getTime() + '圆圆向我们走来')}}>圆圆</button>
            <ChildComponent name={ahong}>{yuanyuan}</ChildComponent>
        </>
    )
}

export default Example8